<template>
  <div>
    <el-menu
      v-model:default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="index => (activeIndex = index)"
    >
      <el-menu-item index="1">项目进度</el-menu-item>
      <el-menu-item index="2">任务分布</el-menu-item>
      <el-menu-item index="3">工作量统计</el-menu-item>
    </el-menu>
    <!--数据-->
    <div v-if="activeIndex === '1'" style="margin-top: 10px">
      <el-table :data="tableData" border style="width: 100%" row-key="id">
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="status" label="主要参与成员">
          <template #default="scope">
            {{
              scope.row.companyUsers
                ?.filter(u => u)
                ?.map(u => u?.nickName)
                .join(",")
            }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="项目状态">
          <template #default="scope">
            {{ projectStatus[scope.row.status - 1] }}
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="任务完成进度">
          <template #default="{ row: { finishDemand, totalDemand } }">
            <el-tooltip
              :content="`${finishDemand}/${totalDemand}`"
              placement="right-start"
              effect="light"
            >
              <el-progress
                :percentage="
                  totalDemand ? parseInt((finishDemand * 100) / totalDemand) : 0
                "
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="unfinished" label="未完成任务数">
          <template #default="{ row: { finishDemand, totalDemand } }">
            {{ totalDemand - finishDemand }}
          </template>
        </el-table-column>
        <el-table-column prop="delay" label="延期任务数">
          <template #default="{ row: { delayDemand } }">
            {{ delayDemand }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="activeIndex === '2'" style="margin-top: 10px">
      <project-selector v-model="projectId" />
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 10px"
        row-key="id"
      >
        <el-table-column prop="projectName" label="所属项目" />
        <el-table-column prop="name" label="任务名称" />
        <el-table-column prop="priority" label="优先级">
          <template #default="scope">
            {{ priorityStatus[scope.row.priority] }}
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" />
        <el-table-column prop="endTime" label="结束时间" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            {{ demandStatus[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="charge" label="负责人">
          <template #default="scope">
            {{ scope.row.charge?.nickName }}
          </template>
        </el-table-column>
        <el-table-column prop="companyUsers" label="参与成员">
          <template #default="scope">
            {{
              scope.row.companyUsers
                ?.filter(u => u)
                ?.map(u => u.nickName)
                .join(",")
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="activeIndex === '3'" style="margin-top: 10px">
      <el-date-picker
        v-model="workloadTime"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 10px"
        row-key="id"
      >
        <el-table-column prop="userInfoVO.nickName" label="用户名称" />
        <el-table-column prop="attProjectNum" label="参与项目数量" />
        <el-table-column prop="chargeTaskNum" label="负责任务数量" />
        <el-table-column prop="finishTaskNum" label="完成任务数量" />
        <el-table-column prop="workTime" label=" 工时" />
      </el-table>
    </div>

    <!-- 常规数据分页开始 -->
    <el-pagination
      v-model::current-page="query.current"
      v-model:page-size="query.size"
      style="margin-top: 10px"
      :total="pageTotal"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      layout="prev,pager,next,jumper,sizes,total"
      @size-change="pageSizeChange"
      @current-change="currPageChange"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { listProject, listTask, listWorkLoad } from "@/api/report.ts";
import ProjectSelector from "@/components/Selector/ProjectSelector.vue";
import dayjs from "dayjs";
import { shortcuts } from "@/constants/time.ts";
defineOptions({
  name: "statement"
});
let activeIndex = ref("1");
let tableData = ref([]);
let query = reactive({ current: 1, size: 10 });
let pageTotal = ref<number>(0);
async function getList() {
  if (activeIndex.value == "1") {
    let res = await listProject({ ...query });
    tableData.value = res.data.records;
    pageTotal.value = res.data.total;
  } else if (activeIndex.value == "2") {
    let res = await listTask({ ...query, projectId: projectId.value });
    tableData.value = res.data.records;
    pageTotal.value = res.data.total;
  } else if (activeIndex.value == "3") {
    let res = await listWorkLoad({
      ...query,
      startTime: dayjs(workloadTime.value[0]).format(`YYYY-MM-DDTHH:mm:ss`),
      endTime: dayjs(workloadTime.value[1]).format(`YYYY-MM-DDTHH:mm:ss`)
    });
    tableData.value = res.data.records;
    pageTotal.value = res.data.total;
  }
}
function pageSizeChange(pageSize) {
  query.size = pageSize;
  query.current = 1;
  getList();
}
// 数据页码变化
function currPageChange(pageIndex) {
  query.current = pageIndex;
  getList();
}
onMounted(() => {
  getList();
});
const projectStatus = ["需求中", "开发中", "已交付", "已停滞"];
const priorityStatus = ["低", "一般", "高", "紧急"];
const demandStatus = ["未开始", "进行中", "已完成", "测试中"];

watch(activeIndex, () => {
  tableData.value = [];
  query.current = 1;
  query.size = 10;
  getList();
});

let projectId = ref("");
watch(projectId, () => {
  query.current = 1;
  query.size = 10;
  getList();
});
let workloadTime = ref([]);
watch(workloadTime, () => {
  query.current = 1;
  query.size = 10;
  getList();
});
</script>
